<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
        html, body, #app, .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-header {
            background-color: #B3C0D1;
            line-height: 25px;
        }
        el-aside {
            background-color: #D3DCE6;
            color: #333;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }
        .code-container {
            position: relative;
        }
        .code {
            background-color: #f4f4f4;
            font-family: 'Microsoft YaHei', sans-serif;;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .copy-button {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 5px 10px;
            cursor: pointer;
        }


    </style>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-router.js"></script>
    <link rel="stylesheet" href="/css/el/index.css">
    <script src="/js/el/index.js"></script>
    <script type="text/javascript" src="/js/axios/index.js"></script>
    <script type="text/javascript" src="/api/ajax.js"></script>
    <script src="js/marked/marked.js"></script>

</head>
<body>
<div id="app">
    <el-container height>
        <el-header>
            <el-row style="margin-top: 10px">
                <el-col :span="3"><el-input v-model="params.keyword"><template slot="prepend">关键词</template></el-input></el-col>
                <el-col :span="18"><el-input v-model="params.cookie"><template slot="prepend">Cookie</template></el-input></el-col>
                <el-col :span="3"></el-col><el-button @click="videoList" :loading="generateLoading">获取视频列表</el-button></el-input></el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-main>
                <el-table :data="list" highlight-current-row @current-change="videoDetails" empty-text="暂无数据" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column property="id" label="id" width="120"></el-table-column>
                    <el-table-column property="title" label="title"></el-table-column>
                </el-table>
            </el-main>
            <el-aside width="600px">
                <div class="code-container" v-show="details != null && details != ''">
                    <pre class="code" id="codeSnippet">
                        <code style="font-family: 'Microsoft YaHei', sans-serif">
                            {{details}}
                        </code>
                    </pre>
                    <button class="copy-button" @click="copyCode()">{{copyButtonText}}</button>
                </div>
            </el-aside>
        </el-container>
    </el-container>


</div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                generateLoading: false,
                params: {
                    cookie: '',
                    keyword: 'opencv'
                },
                list: [],
                details: "",
                copyButtonText:"复制"
            }
        },
        methods: {
            videoList() {
                this.generateLoading = true;
                axios.post('/videoList', this.params).then(res => {
                    if(res.data.success){
                        this.list = res.data.data
                    }else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.generateLoading = false;
                })
            },
            videoDetails(row) {
                this.generateLoading = true;
                axios.get('/videoDetails/'+row.id).then(res => {
                this.details = res.data.data
                }).cache(()=>{
                    this.$message.error("获取视频详情失败")
                }).finally(() => {
                    this.generateLoading = false;
                })
            },
            copyCode() {
                var codeElement = document.getElementById('codeSnippet');
                var range = document.createRange();
                range.selectNode(codeElement);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();
                this.copyButtonText = "已复制";
                setTimeout(() =>{
                    console.log("定时任务开始执行")
                    this.copyButtonText = "复制";
                }, 2000);
            }
        },
    })
</script>
